@charset "utf-8";
@import "common/reset";
@function p($px){   
    @return $px/2+px
}

//padding-top的百分比就等于高度的百分比，所以可以用
//padding-top值来代替高度
//padding-top的百分比的计算方式
//              图片的高度除以其父级元素的宽度
.mobile{
    background: #fff;
    header{
        overflow: hidden;
        .logo{
            float: left;
            width: p(123);
            height: p(123);
            overflow: hidden;
            margin-top: p(17);
            margin-left: p(23);
            img{
                height: 100%;
            }
        }
        .search{
            width: p(268);
            height: P(55);
//          line-height: p(55);
            border: 1px solid #ff9344;
            border-radius: p(22);
            margin: 0 auto;
            margin-top: p(51);
            input[type="text"]{
                width: p(171);
                height: p(45);
                vertical-align: middle;
                border: none;
                margin-left: p(28);
                font-size: p(24);
                margin-top: p(5);
            }
            input[type="image"]{
                width: p(36);
                height: p(34);
                vertical-align: middle;
                margin-left: p(15);
                
            }
        }
        .sel{
            float: right;
            margin-top: p(47);
            margin-right: p(21);
            width: p(163);
            height: p(60);
            border: p(3) solid #ff9344;
            position: relative;
//                      清除select框的默认样式
            select{
                border: none;
            /*将默认的select选择框样式清除*/
                appearance:none;
                -moz-appearance:none;
                -webkit-appearance:none;
                background: transparent;
                width: 100%;
                height: 100%;
                padding-left: p(14);
            }
            /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
            select::-ms-expand { display: none; }
            &::after{
                position: absolute;
                top: p(22);
                right: p(11);
                content: "";
                display: block;
                width: 0px;
                height: 0px;
                border-top: p(16) solid #ff9344;
                border-right: p(16) solid transparent;
                border-left: p(16) solid transparent;
            }
        }
    }
    
    //中间内容
    section{
        width: 100%;
        margin-top: p(10);
        margin-bottom: p(150);
        img{
            width: 100%;
        }
        .group{overflow: hidden;
            .group_top{
                overflow: hidden;
                height: p(55);
                line-height: p(55);
                margin-top: p(34);
                margin-left: p(21);
                margin-right: p(21);
            }
            .group_top_left{
                float: left;
                img{
                    width: p(56);
                    height: p(54);
                    vertical-align: middle;
                }
                span{
                    font-size: p(28);
                    vertical-align: middle;
                }
            }
            .group_top_right{
                float: right;
                a{
                    color: #000000;
                }
                img{
                    width: p(26);
                    height: p(26);
                    vertical-align: middle;
                }
                span{
                    font-size: p(24);
                    vertical-align: middle;
                }
            }
            .group_top_kv{
                float: left;
                width: 50%;
                text-align: center;
                margin-top: p(30);
                img{
                    width: p(239);
                    height: p(93);
                }
            }
        }
        .like{
            overflow: hidden;
            .like_top{
                overflow: hidden;
                height: p(55);
                line-height: p(55);
                margin-top: p(34);
                margin-left: p(21);
                margin-right: p(21);
                .like_top_left{
                    float: left;
                    img{
                        width: p(56);
                        height: p(54);
                        vertical-align: middle;
                    }
                    span{
                        font-size: p(28);
                        vertical-align: middle;
                    }
                }
                .like_top_right{
                    float: right;
                    a{
                        color: #000000;
                    }
                    img{
                        width: p(26);
                        height: p(26);
                        vertical-align: middle;
                    }
                    span{
                        font-size: p(24);
                        vertical-align: middle;
                    }
                }
                
            }
            .like_xinxi{
                overflow: hidden;
                margin-top: p(34);
                margin-left: p(21);
                .like_xinxi_left{
                    float: left;
                    img{
                        width: p(210);
                        height: p(164);
                    }
                }
                .like_xinxi_right{
                    overflow: hidden;
                    padding-left: p(21);
                    padding-right: p(15);
                    .right_a{
                        float: left;
                        p:first-child{
                            font-size: p(29);
                        } 
                        p:nth-of-type(2){
                            color: gray;
                            font-size: p(21);
                        }
                        p:nth-of-type(3){
                            color: #ff9344;
                        }
                    }
                    .right_b{
                        float: right;
                        p:first-child{
                            font-size: p(18);
                            color: gray;
                            text-align: right;
                        }
                        p:nth-of-type(2){
                            font-size: p(22);
                            color: gray;
                            padding-top: p(50);
                        }
                    } 
                }
            }
        }
    }
    footer{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: white;
        ul{
            li{
                float: left;
                width: 25%;
            }
            a{
                display: block;
                text-align: center;
                color: #000000;
                img{
                   width: p(75);
                   height: p(75);
                }
                h2{
                    font-size: p(26);
                    margin-top: p(9);
                    margin-bottom: p(14);
                }
            }
        }
    }
}
